<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="colorui/main.css">
    <link rel="stylesheet" type="text/css" href="colorui/icon.css">
    <script type="text/javascript" src="js/webview.js"></script>
    <script type="text/javascript" src="rtc/adapter-latest.js"></script>
	<link rel="stylesheet" type="text/css" href="style/style.css">
    <style>
      body {
        overflow-y: hidden;
        overflow-x: hidden;
        margin: 0 !important;
      }

      body {
        background-color: #8799a3
      }

      .cu-avatar.xl {
        width: 93px;
        height: 93px
      }

      .trtc-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
      }

      .trtc-bar .roundicon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        line-height: 60px;
        font-size: 28px;
        position: relative;
        margin: 0 auto
      }

      .trtc-bar .roundicon.rotate {
        -webkit-transform: rotate(125deg);
        transform: rotate(125deg)
      }

      .trtc-bar .roundicon.close::before {
        content: " ";
        width: 2px;
        height: 32px;
        margin-top: -16px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg)
      }

      .trtc-bar .roundicon[class*="line"]::after {
        content: " ";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid currentColor;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 50%;
        z-index: 1;
        pointer-events: none
      }

      body {
        background-color: #8799a3
      }

      .grid.col-2>div {
        width: 50%;
      }

      .grid.col-3>div {
        width: 33.33%;
      }

      .padding {
        padding: 15px;
        box-sizing: border-box;
      }

      .margin-top {
        margin-top: 15px;
      }

      .padding-top-sm {
        padding-top: 10px;
      }

      .text-muted {
        color: #e0e0e0;
        font-size: 14px;
      }

      .hidden,
      .noaf::after,
      .nobf::before {
        display: none !important;
      }

      .bg-limegreen {
        background-color: #05c160;
        color: #fff;
      }

      .calltime-box {
        position: fixed;
        bottom: 100px;
        left: 50%;
        transform: translate(-50%, 0);
        height: 100px;
      }

      .callinfo-box {
        width: 80%;
        position: fixed;
        bottom: 300px;
        left: 50%;
        transform: translate(-50%, 0);
        height: 100px;
      }

      .video-my-box {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 100px;
        height: 200px;
		z-index: 9999;
        background-color: #000000;
      }

      .video-my {
        width: 100px;
        height: 200px;
      }

      .video-other-box {
        width: 100vw;
        height: 100vh;
        background-color: #8799a3;
      }

      .video-other {
        width: 100vw;
        height: 100vh;
      }

      .video {
        object-fit: cover;
      }
	  .padding-ios{
		  padding-top: env(safe-area-inset-top)
	  }
	  .transVideo{
		transform: rotateY(180deg);
	  		  /* transform: rotate(180deg) */
	  }
    </style>
  </head>
  <body> 
    <div class="video-my-box hidden callVideo" onclick="exchangeVideo()">
      <video class="video-my video" id="my_video" poster="/static/wallpaper.png" x5-video-player-fullscreen="true"
        x5-playsinline playsinline webkit-playsinline preload muted autoplay></video>
    </div>
    <!-- <div class="video-other-box hidden callVideo"> -->
    <div class="video-other-box">
      <video class="video-other video transVideo" id="local_video" poster="/static/wallpaper.png" x5-video-player-fullscreen="true"
        x5-playsinline playsinline webkit-playsinline preload muted autoplay></video>
    </div>

    <div class="padding-xl callinfo-box" id="videoBox">
      <div class="flex justify-center">
        <div class="cu-avatar xl radius" id="avatar">
        </div>
      </div>
      <div class="padding text-white text-center">
        <span class="text-xs" id="name"></span>
        <div class="text-lg margin-top text-muted" id="tips">对方邀请您进行视频通话</div>
        <!-- <div class="text-lg margin-top calltime hidden text-white" id="calltime">00:00:00</div> -->
      </div>
    </div>




    <!-- 通话时长展示 -->
    <div class="calltime-box">
      <div class="text-lg margin-top calltime hidden text-white" id="calltime">00:00:00</div>
    </div>



    <div class="foot trtc-bar">
      <div class="grid col-2 btnGroup">
        <div class="padding text-center hidden voiceBtn" id="voiceBtn" onclick="videoBtn()">
          <div class="roundicon bg-white voiceBtnIn">
            <span class="cuIcon-voicefill"></span>
          </div>
          <div class="padding-top-sm">
            <span class="text-muted voiceBtnText" id="voiceBtnText">麦克风</span>
          </div>
        </div>
        <div class="padding text-center" id="cancelBtn" onclick="cancelBtnd()">
          <div class="roundicon bg-red rotate">
            <span class="cuIcon-dianhua"></span>
          </div>
          <div class="padding-top-sm">
            <span class="text-muted"></span>
          </div>
        </div>
        <div class="padding text-center asceptCall" id="asceptCall" onclick="acceptVideo()">
          <div class="roundicon bg-limegreen">
            <span class="cuIcon-recordfill"></span>
          </div>
          <div class="padding-top-sm">
            <!-- <span class="text-muted">接听</span> -->
          </div>
        </div>
        <div class="padding text-center hidden speakBtn" id="speakBtn" onclick="changeMedia()">
          <div class="roundicon line-white speakBtnIn">
            <span class="cuIcon-circlefill"></span>
            <!-- <u-icon name="/static/qiehuan.png"></u-icon> -->
          </div>
          <div class="padding-top-sm">
            <span class="text-muted speakBtnText" id="speakBtnText">切换</span>
          </div>
        </div>
      </div>
    </div>
	
	<div class="cu-modal bottom-modal meida-modal">
	  <div class="cu-modal-bg" onclick="handleCloseMedia()"></div>
	  <div class="cu-dialog border-radius-tr">
	    <div class="flex justify-between padding-lr-lg">
	      <div class="radius padding-sm" onclick="changeVideo()">
	        <div class="text-xl roundicon speakBtnIn">
	          <span class="cuIcon-circlefill"></span>
	        </div>
	        <div class="text-xs">切换摄像头</div>
	      </div>
	      <div class="radius padding-sm" onclick="handleDeskShare()">
	        <div class="text-xl roundicon speakBtnIn2">
	          <span class="cuIcon-backdelete"></span>
	        </div>
	        <div class="text-xs">共享桌面</div>
	      </div>
	    </div>
	  </div>
	</div>
	
  </body>
  <!-- <script type="text/javascript" src="config/config.js"></script>
  <script type="text/javascript" src="js/jsonly.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script type="text/javascript" src="config/base.js"></script>
  <script type="text/javascript" src="config/config.js"></script>
  <script type="text/javascript" src="js/jsonly.js"></script>
  <script type="text/javascript" src="js/webView-rtc.js"></script>
  <script>
    var myVideo = document.getElementById('my_video');
    var localVideo = document.getElementById('local_video');
    const uniRtc = new webViewRtc({
      ele: myVideo,
      otherEle: localVideo,
      url: baseconfig.iceServer,
      username: baseconfig.username,
      credential: baseconfig.credential
    })
    uniRtc.init(getQueryVariable('platform'))
    uniRtc.ontrack((event) => {
      callFlag = true
      const videoBox = document.getElementById('videoBox')
      videoBox.style.display = 'none'
      removeAllClass('callVideo', 'hidden')
      removeAllClass('calltime', 'hidden')
      removeAllClass('voiceBtn', 'hidden')
      removeAllClass('speakBtn', 'hidden')
      addAllClass('asceptCall', 'hidden')
      removeAllClass('btnGroup', 'col-2')
      addAllClass('btnGroup', 'col-3')
      const calltime = document.getElementById('calltime')
	  localVideo.muted=false;
      startTime(calltime)
    })
    uniRtc.receiveVideo()
    uniRtc.receiveAppMessage()
    
    uniRtc.receiveMessage()
    window.onload = function() {
      updateInfo()
      if(getQueryVariable('complete')) {
        setTimeout(() => {
           acceptVideo()
        }, 500)
      }
    }
  </script>
</html>
